<template>
  <div>
    <el-form ref="form" :model="form" :rules="rules" style="margin-top: 6px;" size="small" label-width="90px">
      <el-form-item label="输入Json" prop="body">
        <textarea ref="textarea" v-model="form.body"/>
      </el-form-item>
      <el-form-item label="生成类别" prop="generatorType">
        <el-radio-group v-model="form.generatorType" size="medium">
          <el-radio v-for="(item, index) in generatorTypeOptions" :key="index" :label="item.value"
                    :disabled="item.disabled">{{item.label}}
          </el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="">
        <el-button :loading="doSubmitLoading" size="medium" type="primary" @click="doSubmit">生成</el-button>
        <el-button :loading="doFormatLoading" size="medium" type="primary" @click="doFormat">格式化</el-button>
      </el-form-item>

      <pre>
        {{ errorInfo }}
      </pre>
    </el-form>
  </div>
</template>

<script>
    import CodeMirror from "codemirror";
    import "codemirror/addon/lint/lint.css";
    import "codemirror/lib/codemirror.css";
    import "codemirror/theme/rubyblue.css"; // 主题显示，可以百度搜索其他的主题
    require("script-loader!jsonlint");
    import "codemirror/mode/javascript/javascript";
    import "codemirror/addon/lint/lint";
    import "codemirror/addon/lint/json-lint";

    export default {
        name: "JsonEditor",
        /* eslint-disable vue/require-prop-types */
        //   props: ['value'],
        data() {
            return {
                form: {
                    body: '',
                    generatorType: 1

                },
                value: "",
                doSubmitLoading: false,
                doFormatLoading: false,
                jsonEditor: false,
                generatorTypeOptions: [{
                    "label": "Mysql版",
                    "value": 1
                }, {
                    "label": "Entity版",
                    "value": 2
                }
                ],
                rules: {
                    body: [
                        {required: true, message: 'Json字符串不能为空', trigger: 'blur'}
                    ]
                }
            };
        },
        // 监听是否数据改变，随时更新json数据
        watch: {
            value(value) {
                console.log(value);
                const editorValue = this.jsonEditor.getValue();
                if (value !== editorValue) {
                    this.jsonEditor.setValue(JSON.stringify(this.value, null, 2));
                }
            },
            height(value) {
                this.editor.setSize('auto', this.height)
            },
            immediate: true,
            deep: true
        },
        mounted() {
            // 模拟数据接口
            this.value = [
                {
                    items: [
                        {market_type: "forexdata", symbol: "XAUUSD"},
                        {market_type: "forexdata", symbol: "UKOIL"},
                        {market_type: "forexdata", symbol: "CORN"}
                    ],
                    name: ""
                }
            ];
            // CodeMirror的配置项，搜官网看这里的配置项配置
            this.jsonEditor = CodeMirror.fromTextArea(this.$refs.textarea, {
                lineNumbers: false, // 是否显示行数
                mode: "application/json",  // 接受的类型，json xml....
                gutters: ["CodeMirror-lint-markers"], // 样式的宽度
                theme: "idea", // 主题
                lint: true
            });

            this.jsonEditor.setValue(JSON.stringify(this.value, null, 2));
            this.jsonEditor.on("change", cm => {
                //   this.$emit("changed", cm.getValue());
                // 编辑json框里面的内容可以时刻监听到值，通过cm.getValue()获取到
            });
        },
        methods: {
            getValue() {
                return this.jsonEditor.getValue();
            },
            doSubmit() {
            },
            doFormat() {
                console.log(this.jsonEditor)
                if (this.jsonEditor) {
                    const json = this.form.body;
                    const editorValue = this.jsonEditor.getValue();
                    console.log({json});
                    console.log({editorValue});
                    this.jsonEditor.setValue(JSON.stringify(editorValue, null, 2));
                }

            }
        }
    };
</script>

<style scoped>
  .json-editor {
    height: 100%;
    position: relative;
  }

  .json-editor >>> .CodeMirror {
    height: auto;
    min-height: 300px;
  }

  .json-editor >>> .CodeMirror-scroll {
    min-height: 300px;
  }

  .json-editor >>> .cm-s-rubyblue span.cm-string {
    color: #f08047;
  }
</style>

